<template>
  <div class="user_pwd">
    <navBar
      :title="active == 2 ? '修改成功' : '修改密码'"
      @onClickLeft="$router.back()"
    />
    <div v-if="active == 0">
      <div class="user_pwd">
        <van-form>
          <van-field
            v-model="oldPwd"
            name="oldPwd"
            class="isRequired"
            placeholder="请输入原密码"
            :rules="[
              { pattern: /\d{6,16}/, required: true, message: '请输入原密码' }
            ]"
            :type="inputType"
          >
            <template #right-icon>
              <van-icon :name="iconName" @click="changeShow" />
            </template>
          </van-field>
          <van-field
            v-model="newPwd"
            name="newPwd"
            class="isRequired"
            placeholder="请输入新密码"
            :type="inputType1"
            :rules="[
              { pattern: /\d{6,16}/, message: '请输入新密码,密码长度应为6-16' }
            ]"
          >
            <template #right-icon>
              <van-icon :name="iconName1" @click="changeShow1" />
            </template>
          </van-field>
          <van-field
            v-model="againPwd"
            name="againPwd"
            class="isRequired"
            placeholder="请确认新密码"
            :type="inputType2"
            :rules="[
              {
                pattern: /\d{6,16}/,
                required: true,
                message: '请确认两次密码是否相同！'
              }
            ]"
          >
            <template #right-icon>
              <van-icon :name="iconName2" @click="changeShow2" />
            </template>
          </van-field>
        </van-form>
      </div>
      <div class="btn_warp">
        <van-button type="info" class="btn" @click="EditPwdBtn" :disabled="btn2"
          >确认修改</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { getCode } from "@a/login";
import { setpassword, getMyInfo } from "@/api/user";
import { Toast } from "vant";
import {get} from '../../../../public/API/query'
export default {
  components: {
    navBar
  },
  data() {
    return {
      //当前步骤
      active: 0,
      telNum: "",
      code: "",
      showKeyboard: true,
      // 密码
      oldPwd: "",
      newPwd: "",
      againPwd: "",
      // 按钮禁用
      btn1: true,
      btn2: true,
      // 验证码倒计时
      djsFlag: true,
      djs: 60,
      // 后台返回的验证码
      getcode: "",
      errorInfo: "",
      iconName: "closed-eye",
      inputType: "password",
      iconName1: "closed-eye",
      inputType1: "password",
      iconName2: "closed-eye",
      inputType2: "password"
    };
  },
  methods: {
    sendBtn() {
      if (this.code != this.getcode) {
        Toast.fail("验证码有误！");
      } else {
        this.active = 1;
      }
    },
    // 修改密码，进去下一步
    async EditPwdBtn() {
      let params = {
        oldPassWord: this.oldPwd,
        password: this.newPwd,
        againPassword:this.againPwd
      };
      if (this.newPwd === this.againPwd && this.oldPwd !== "") {
       get('editPassword',params,res=>{
         if (res.code == 200) {
          Toast.success("修改密码成功");
          this.loginBtn()
          } else {
            Toast.fail("修改密码失败");
          }
       })
      } else {
        Toast.fail("请检查两次输入密码是否相同！");
      }
    },
    loginBtn() {
      this.$store.commit("delUser");
      this.$store.commit("delToken");
      sessionStorage.removeItem("store");
      sessionStorage.removeItem("token");
      this.$router.replace("/");
    },
    onInput(key) {
      this.code = (this.code + key).slice(0, 6);
    },
    onDelete() {
      this.code = this.code.slice(0, this.code.length - 1);
    },  
    changeShow() {
      if (this.iconName == "closed-eye" && this.inputType == "password") {
        this.iconName = "eye";
        this.inputType = "text";
      } else {
        this.iconName = "closed-eye";
        this.inputType = "password";
      }
    },
    changeShow1() {
      if (this.iconName1 == "closed-eye" && this.inputType1 == "password") {
        this.iconName1 = "eye";
        this.inputType1 = "text";
      } else {
        this.iconName1 = "closed-eye";
        this.inputType1 = "password";
      }
    },
    changeShow2() {
      if (this.iconName2 == "closed-eye" && this.inputType2 == "password") {
        this.iconName2 = "eye";
        this.inputType2 = "text";
      } else {
        this.iconName2 = "closed-eye";
        this.inputType2 = "password";
      }
    }
  },
  created() {
    this.active = 0;
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },

  watch: {
    code: function() {
      if (this.code.length == 6 && this.code) {
        this.btn1 = false;
      } else {
        this.btn1 = true;
      }
    },
    againPwd: function() {
      if (/\d{6,16}/.test(this.againPwd) && /\d{6,16}/.test(this.newPwd)) {
        this.btn2 = false;
      } else {
        this.btn2 = true;
      }
    }
  }
};
</script>

<style lang="less">
.user_pwd {
  .bzt {
    display: flex;
    justify-content: center;
    i {
      font-size: 35px;
    }
    .van-steps {
      width: 80%;
      height: 70px;
      .van-steps__items > div:nth-child(2) {
        left: -15px;
      }
    }
  }
  .user_form {
    display: flex;
    justify-content: center;
    margin-top: 10%;
    .van-cell {
      width: 325px;
      border-bottom: solid 1px #006cff;
    }
  }
  .van-field__label {
    width: 40px;
  }
  .sendcode {
    color: #006cff;
  }
  .van-password-input {
    width: 100%;
    margin-left: -10px;
    border: none !important;
    ul {
      border: none;
      width: 100%;
      li {
        border: none;
        margin-left: 11px;
        border-left: none;
        border-right: none;
        border-bottom: 1px #006cff solid;
        text-align: center;
        width: 44px;
        ::after {
          border: 0;
        }
      }
      ::after {
        border: 0;
      }
    }
  }
  .btn_warp {
    margin-top: 10%;
    display: flex;
    justify-content: center;
    .btn {
      width: 325px;
      height: 45px;
      background: #0016ff;
      border-radius: 22.5px;
    }
  }
  .user_pwd {
    display: flex;
    justify-content: center;

    .van-cell {
      width: 325px;
      border-bottom: solid 1px #006cff;
    }
  }
  .icon_warp {
    display: flex;
    justify-content: center;
    .icon-dui {
      font-size: 125px;
      color: #006cff;
      margin-top: 10%;
    }
  }
  .van-hairline--surround::after {
    border: 0;
  }
  .activeI {
    color: blue;
  }
}
</style>
